<app-toolbar>
    <nz-space>
      <button *nzSpaceItem nz-button nzType="primary" (click)="reload()">
        <i nz-icon nzType="reload" [nzSpin]="loading"></i>
        刷新
      </button>
      <button *nzSpaceItem nz-button nzType="primary" (click)="create()">
        <i nz-icon nzType="plus" [nzSpin]="loading"></i>
        创建
      </button>
      <button nz-button nzType="primary" *nzSpaceItem class="btn">
        <span nz-icon nzType="cloud-download" nzTheme="outline"></span>
        <a (click)="handleExport()" download="filename" [href]="href"
          >导出</a
        >
      </button>

      <app-import *nzSpaceItem  [url]="'device/area/import'"></app-import>

     
      <app-search-box *nzSpaceItem (onSearch)="search($event)"></app-search-box>
      
      <button
        *nzSpaceItem
        nz-button
        nzType="primary"
        nzDanger
        (click)="handleBatchDel()"
      >
        批量删除
      </button>
    </nz-space>
  </app-toolbar>
  
  <nz-table
    #basicTable
    [nzData]="datum"
    [nzShowPagination]="false"
    [nzLoading]="loading"
    [nzScroll]="getTableHeight()"
    (nzQueryParams)="onQuery($event)"
  >
    <thead>
      <tr>
        <th
          [nzChecked]="checked"
          [nzIndeterminate]="indeterminate"
          (nzCheckedChange)="handleAllChecked($event)"
        ></th>
        <th nzColumnKey="id" [nzSortFn]="true">ID</th>
        <th nzColumnKey="name" [nzSortFn]="true">名称</th>
        <th nzColumnKey="desc">描述</th>
        <th nzColumnKey="created" [nzSortFn]="true">日期</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data; let i = index">
        <td
          [nzChecked]="setOfCheckedId.has(data.id)"
          (nzCheckedChange)="handleItemChecked(data.id, $event)"
        ></td>
        <td>{{ data.id }}</td>
        <td>{{ data.name }}</td>
        <td>{{ data.desc }}</td>
        <td>{{ data.created | date }}</td>
        <td>
          <a (click)="edit(data.id)">
            <i nz-icon nzType="edit"></i>
          </a>
          <nz-divider nzType="vertical"></nz-divider>
          <a
            nz-popconfirm
            nzPopconfirmTitle="确定删除?"
            (nzOnConfirm)="delete(data.id)"
            (nzOnCancel)="cancel()"
            nzPopconfirmPlacement="topLeft"
          >
            <i nz-icon nzType="delete"></i>
          </a>
        </td>
      </tr>
    </tbody>
  </nz-table>
  